<template>
  <el-dialog
    :title="isEdit ? '编辑权限点' : '新增权限点'"
    :visible="value"
    width="50%"
    @close="close"
  >
    <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="ruleForm.code" />
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="ruleForm.description" />
      </el-form-item>
      <el-form-item label="开启" prop="enVisible">
        <el-switch v-model="ruleForm.enVisible" active-color="#13ce66" active-value="1" inactive-value="0" />
      </el-form-item>
      <el-form-item class="btn-contain">
        <el-button type="primary" @click="submitForm">{{ isEdit? '更新' : '新增' }}</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addPermissionRequest, getPermissionDetailRequest, updatePermissionDetailRequest } from '@/api/permission'
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    type: {
      type: Number,
      required: true
    },
    pid: {
      type: [String, Number],
      required: true
    },
    list: {
      type: Array,
      required: true
    },
    isAddOrEdit: {
      type: String,
      required: true
    }
  },
  data() {
    const validatorName = (rules, value, callback) => {
      // 因为编辑的时候，当前的名称可以重复，所有我们在这里写校验的时候，要先把当前的数据从数组里筛选出来
      let tmp = this.list
      if (this.isAddOrEdit === 'edit') {
        // 如果是编辑的时候，tmp使用过滤以后的数组重新赋值，再去使用下面的some去判断是否重复。当前元素可以重复
        tmp = this.list.filter(item => item.id !== this.pid)
        console.log(tmp)
      }
      if (tmp.some(item => item.name === value)) {
        callback(new Error('权限名称不能重复'))
        return
      }

      callback()
    }

    const validatorCode = (rules, value, callback) => {
      let tmp = this.list
      if (this.isAddOrEdit === 'edit') {
        tmp = this.list.filter(item => item.id !== this.pid)
        console.log(tmp)
      }
      if (tmp.some(item => item.code === value)) {
        callback(new Error('权限标识不能重复'))
        return
      }

      callback()
    }
    return {
      dialogVisible: false,
      ruleForm: {
        name: '',
        code: '',
        description: '',
        enVisible: '0'
      },
      rules: {
        // 前端这里常见的校验规则有 基础校验（必填，最大最小值，正则校验等等） + 业务校验（常见的去重操作--记住与自定义校验）
        name: [
          { required: true, message: '权限点名称必填', trigger: 'blur' },
          { validator: validatorName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '权限点标识必填', trigger: 'blur' },
          { validator: validatorCode, trigger: 'blur' }
        ],
        description: [
          { required: true, message: '权限点描述必填', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isEdit() {
      return this.isAddOrEdit === 'edit'
    }
  },
  watch: {
    // 一开始进入组件的时候，watch的函数并不会执行，需要加一个属性 immediate 立即执行
    // isAddOrEdit(newV, oldV) {
    //   // 这个方法还需要处理很多的逻辑，如果点了编辑，在点击另外的编辑，这个watch函数就不会走
    //   // 如果要这么写的话，就是在关闭的时候，将isAddOrEdit值修改为add 初始值，才可以。笔记麻烦，容易出问题
    //   console.log('watch里面的函数执行：', newV, oldV)
    // }
    isAddOrEdit: {
      handler(newV, oldV) {
        console.log('watch里面的函数执行：', newV, oldV)
      },
      deep: true, // 如果监听的是一个对象，那么就需要添加deep---深度监听
      immediate: true // 一进入组件，就执行watch的回调函数
    }
  },
  created() {
    console.log('进入弹出框子组件:', this.isAddOrEdit)
    this.init()
  },
  methods: {
    async init() {
      if (this.isAddOrEdit === 'edit') {
        const res = await getPermissionDetailRequest(this.pid)
        console.log(res)
        this.ruleForm = res.data
      }
    },

    close() {
      this.$emit('input', false)
    },
    // openDialog() {
    //   this.dialogVisible = true
    // },
    submitForm() {
      // 点击添加，有6个属性，页面上只有4个属性，还有两个属性需要提前准备好
      // pid 就是我们 添加的权限父节点的id， 页面权限的pid就是0  按钮级别的pid就是父页面的id
      // type 我们的前端项目有两种权限，一种是页面权限1，一种是按钮权限2
      // 我们的页面，有两个添加按钮，分别是添加页面权限， 和添加按钮权限的
      // 传参涉及到对象的合并，默认页面上的四个，和props里面的2个合并成为6个参再发请求
      this.$refs.formRef.validate(async(value) => {
        if (value) {
          if (this.isEdit) {
            await updatePermissionDetailRequest(this.ruleForm)
          } else {
            await addPermissionRequest({ ...this.ruleForm, type: this.type, pid: this.pid })
          }
          // 请求成功以后，关闭弹出框，刷新列表页面
          // this.dialogVisible = false
          this.close()
          this.$emit('ADD_SUCCESS')
        }
      })
    },
    cancel() {
      this.close()
    }
  }
}
</script>

<style lang="scss">
// 面试官问你，怎么样解决修改element-ui的内部组件样式不生效的问题？
btn-contain {
  .el-form-item__content {
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
::v-deep.btn-contain {
  .el-form-item__content {
    text-align: center;
  }
}
</style>
